<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- 头部卡片 -->
      <el-card>
        <el-row class="title-box">
          <img
            v-errImg="require('@/assets/common/1.gif')"
            :src="avatar"
            alt=""
          />
          <span>{{ name }}，今天，也是充满希望的一天</span>
        </el-row>
      </el-card>
      <!-- 主要内容 -->
      <el-row type="flex" justify="space-between">
        <!-- 左侧内容 -->
        <el-col :span="12" style="padding-right: 26px">
          <!-- 工作日历 -->
          <el-card class="box-card">
            <div slot="header" class="header">
              <span>工作日历</span>
            </div>
            <!-- 放置日历组件 -->
            <worcalendar />
          </el-card>
          <!-- 公告 -->
        </el-col>
        <!-- 右侧内容 -->
        <el-col :span="12">
          <!-- 绩效指数 -->
          <el-card class="box-card">
            <div slot="header" class="header">
              <span>绩效指数</span>
            </div>
            <!-- 放置雷达图 -->
            <Piechart></Piechart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import worcalendar from './components/work-calendar.vue'
import Piechart from './components/pieChart.vue'
export default {
  name: 'Dashboard',
  components: {
    worcalendar,
    Piechart
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar'
    ])
  },
  data () {
    return {
      value: new Date()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.title-box {
  img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 40px;
    vertical-align: middle;
  }
}
.calendar {
  width: 300px;
  height: 300px;
}
.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.header-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

.sideNav,
.sideLink {
  padding: 30px 0 12px;
  .sideBtn {
    padding: 16px 26px;
    font-size: 16px;
    margin: 10px 5px;
  }
}
</style>
